define([
  'order!jquery',
  'order!underscore',
  'order!collections/Notifications',
  'order!views/View',
  'order!bootstrap_dropdown',
  'order!bootstrap_collapse'
], function($, _, Notifications, View){
  var Topbar = View.extend({
    el: $("#topbar"),
    
    initialize: function(){
      var timeout = 1*10*1000; // Interval delay in ms for executing getNotifications callback. Now the interval is 2 minutes.

      // Dropdown twitter bootstrap plugin. For dropdown menus in the topbar.
      //this.el.dropdown();

      // Create notifications collection
      this.notifications = new Notifications({limit: 5});

      // Before settings the callback functions of timers. Bind them to the Topbar view context.
      _.bindAll(this,
                'getNotifications',
                'updateNotifications');
      
      // Setting the timer for getting notifications.
      //      this.timer = setInterval(this.getNotifications, timeout);

      // Bind to the events of the notifications collections
      //      this.notifications.bind("change", this.updateNotifications, this);
    },

    getNotifications: function() {
      console.log("Getting notifications!!!!");
      this.notifications.fetch();
      // TODO remove it. Now its for mocked up that there are some notifications
      this.notifications.trigger("change");
    },

    updateNotifications: function() {
      // TODO simulating...
      console.log("Updating notifications");
      var $total = this.$("#notifications_total");
      var $list = this.$("#notifications_list");
      var totalNum = parseInt($total.html());
      totalNum++;
      $total.html(totalNum);
      var notificationLink = this.$("<a></a>").html("Notification " +totalNum);
      console.log(notificationLink);
      var $notification = this.$("<li></li>").append(notificationLink);
      $list.append($notification);
    }
    
    
  });

  return Topbar;
});